<template>
  <view class="content ovh" style="padding: 10rpx;">
    <jpCharts v-if="list.length>0" :list="list" :Y="Charts.Y" :X="Charts.X" :keyId="Charts.keyId" :width="Charts.width" :bgColor="Charts.bgColor" :height="Charts.height" :canClick="Charts.canClick" :x_width="Charts.x_width" :items="items" :proportion="Charts.proportion" :checkedColor="Charts.checkedColor" :scrollLeft="100"></jpCharts>
  </view>
</template>
<script>

import jpCharts from "../../components/jp-charts/index.vue";

export default {
  components: {
    jpCharts
  },
  data() {
    return {
      Charts: { //y轴配置 value在list中的键 showY是否一直显示数据 size字大小 units文字后缀
        Y: {
          value: 'value',
          showY: true,
          size: 20,
          units: '元'
        },
        X: {
          value: 'keyw',
          showX: true,
          size: 20,
          units: ''
        },
        keyId: 'keyw',
        list: [],
        items: {},
        width: 750,
        height: 700,
        x_width: 110,
        proportion: 35, //宽度占比
        showZ: false, //是否显示线条
        checkedColor: '#007aff',
        canClick: true, //不可以点击
        bgColor: '#fff',
        scrollLeft: 0
      },
      list: [
        { "keyw": "01", "value": 100 },
        { "keyw": "02", "value": 120 },
        { "keyw": "03", "value": 110 },
        { "keyw": "04", "value": 90 },
        { "keyw": "05", "value": 130 },
        { "keyw": "06", "value": 95 },
        { "keyw": "07", "value": 115 },
        { "keyw": "08", "value": 105 },
        { "keyw": "09", "value": 125 },
        { "keyw": "10", "value": 85 },
        { "keyw": "11", "value": 135 },
        { "keyw": "12", "value": 80 }
      ],
      items: {
        keyw: '03',
        value: 110
      }
    }
  },
}
</script>
